<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>

    <title>预约信息</title>

    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/main.css"/>
    <script src="/js/vue.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/data/options.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <style>
        input {
            outline: none;
            border: none;
            height: 20px;
            line-height: 20px;
        }

        input::-webkit-input-placeholder {
            font-size: 14px;
            font-size: 14 px
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        #app {
            /* 将 flex-grow 设置为1，该元素会占用全部可使用空间
               而其他元素该属性值为0，因此不会得到多余的空间*/
            /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .footer {
            /* 和 header 一样，footer 也采用固定高度*/
            /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
            flex: 0 0 auto;
        }

        .appointment_item_list {
            display: flex;
            flex-direction: column;
            flex: 1 0 auto;

        }

        .appointment_item {
            display: flex;
            padding: 10px 7px;
            margin: 0 15px;
            border-bottom: 1px solid #c0c0c0;
            font-size: 16px;
            font-size: 16 px;
        }

        .appointment_item_title {
            flex: 23;
        }

        .appointment_item_content {
            flex: 65;
            color: #888888;
        }

        .appointment_item_operate {
            flex: 12;
        }

        .appointment_item_operate a {
            color: #1876ce;
        }

        .appointment_picker {
            display: flex;
            flex-direction: column;
            padding: 15px;
            margin: 0 15px;
        }

        .appointment_picker_title {
            color: #1876ce;
        }

        .appointment_picker_item_list {
            display: flex;
            flex-direction: column;
        }

        .appointment_picker_item {
            display: flex;
            flex-direction: column;
            padding: 15px;
            margin: 10px 0;
            border: 2px solid #1876ce;
            border-radius: 5px;
        }

        .appointment_picker_item_title {
            width: 100%;
            color: #1876ce;
            font-size: 16px;
            font-size: 16 px;
        }

        .appointment_picker_item_content {
            width: 100%;
            color: #666666;
            font-size: 14px;
            font-size: 14 px;
        }

        .appointment_calendar {
            display: flex;
            flex-direction: column;
        }

        .appointment_calendar_month {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 10px 10px 0;
        }

        .appointment_calendar_week {
            display: flex;
            flex-direction: row;
            padding: 0 10px;
            flex-wrap: wrap;
            border-bottom: 2px solid rgba(24, 118, 206, 0.5);
        }

        .appointment_calendar_weekday {
            margin: 10px 1%;
            width: 12%;
            text-align: center;
        }

        .appointment_calendar_day_list {
            display: flex;
            flex-direction: row;
            padding: 5px;
            flex-wrap: wrap;
        }

        .appointment_calendar_blank {
            margin: 10px 1%;
            width: 12%;
            text-align: center;
        }

        .appointment_calendar_working {
            background-color: #1876ce;
            color: white;
            margin: 10px 1%;
            width: 12%;
            text-align: center;
        }

        .appointment_calendar_holiday {
            background-color: #c0c0c0;
            color: #999999;
            margin: 10px 1%;
            width: 12%;
            text-align: center;
        }

        .arrow_right_blue {
            background: transparent url("/images/right_blue.png");
            background-size: 100%;
            width: 20px;
            height: 20px;
        }

        .arrow_right_gray {
            background: transparent url("/images/right_gray.png");
            background-size: 100%;
            width: 20px;
            height: 20px;
        }

        .arrow_left_blue {
            background: transparent url("/images/left_blue.png");
            background-size: 100%;
            width: 20px;
            height: 20px;
        }

        .arrow_left_gray {
            background: transparent url("/images/left_gray.png");
            background-size: 100%;
            width: 20px;
            height: 20px;
        }

        .appointment_picker_time_list {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
        }

        .time_picker {
            color: #1876ce;
            border: 2px solid #1876ce;
            border-radius: 3px;
            width: 40%;
            margin: 8px 4%;
            text-align: center;
            display: flex;
            flex-direction: column;
        }

        .time_picker .time {
            width: 100%;
            color: #1876ce;
            font-size: 16px;
            font-size: 16 px;
        }

        .time_picker .time_disabled {
            display: none;
        }

        .time_amount {
            color: #999999;

            font-size: 12px;
            font-size: 12 px;
        }

        .time_picker_disabled {
            color: #999999;
            border: 2px solid #999999;
            border-radius: 4px;
            width: 40%;
            margin: 8px 4%;
            text-align: center;
            display: flex;
            flex-direction: column;
        }

        .time_picker_disabled .time {
            color: #999999;
            font-size: 16px;
            font-size: 16 px;
        }
        .time_disabled{

            font-size: 12px;
            font-size: 12 px;
        }

        .time_picker_disabled .time_amount {
            display: none;
        }


    </style>
</head>
<body>
<div id="app">
    <div class="appointment_item_list">
        <div>
            <div class="appointment_item">
                    <span class="appointment_item_title">
                        姓名
                    </span>
                <span class="appointment_item_content" th:text="${appointment.realName}"></span>
                <span class="appointment_item_operate"></span>
            </div>

            <div class="appointment_item">
                    <span class="appointment_item_title">
                        证件号码
                    </span>
                <span class="appointment_item_content" th:text="${appointment.idNumber}"></span>
                <span class="appointment_item_operate"></span>
            </div>
            <div class="appointment_item">
                    <span class="appointment_item_title">
                        手机号码
                    </span>
                <span class="appointment_item_content" th:text="${appointment.phoneNumber}"></span>
                <span class="appointment_item_operate"></span>
            </div>
            <div class="appointment_item">
                    <span class="appointment_item_title">
                        办理业务
                    </span>
                <span class="appointment_item_content" th:text="${appointment.serviceName}"></span>
                <span class="appointment_item_operate"></span>
            </div>
            <div class="appointment_item">
                    <span class="appointment_item_title">
                        办理地点
                    </span>
                <span class="appointment_item_content" th:text="${appointment.hallName}"></span>
                <span class="appointment_item_operate"><a th:href="@{'/hall/page/map?hallId='+${appointment.hallId}}"><img src="/images/icon_navi.png" width="32"/></a></span>
            </div>

            <div class="appointment_item">
                    <span class="appointment_item_title">
                        预约时间
                    </span>
                <span class="appointment_item_content" th:text="${appointment.timeName}"></span>
                <span class="appointment_item_operate"></span>
            </div>
        </div>
    </div>
    <div class="footer">
        <div>
            <div class="button_area">
                <a class="weui-btn weui-btn_primary" th:href="@{'/appointment/add/page?applyId='+${appointment.applyId}}">修 改 预 约</a>
                <a class="weui-btn weui-btn_primary" href="javascript:showTips('确定要取消当前预约吗?');">取 消 预 约</a>
                <a class="weui-btn weui-btn_default" href="javascript:history.go(-1);">返 回</a>
            </div>
        </div>

    </div>
</div>

<div class="js_dialog" id="iosDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd" id="dialogContent">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="/applyList" id="dialogBtn" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>

<div class="js_dialog" id="iosDialog1" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">提醒</strong></div>
        <div class="weui-dialog__bd" id="tipsContent">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:hideDialog1();" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
            <a href="javascript:cancelAppointment();" class="weui-dialog__btn weui-dialog__btn_primary">继续</a>
        </div>
    </div>
</div>

<script th:utext="${params}"></script>
<script>

    function showTips(tips) {
        $("#tipsContent").text(tips);
        $("#iosDialog1").fadeIn(200);
    }

    function hideDialog1() {
        $("#iosDialog1").fadeOut(200);
    }
    function cancelAppointment() {
        hideDialog1();
        $.post('/appointment/cancel',{idList:appId},function (res) {
               showDialog("取消成功!");
        });
    }

</script>


</body>
</html>